import {
  Button,
  Form,
  FormItem,
  Image,
  Input,
  InputNumber,
  message,
  Modal,
  Select,
  SelectOption,
  Space,
  Spin,
  Textarea
} from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref } from 'vue'

import qzyApi from '@/apis/qzyApi'
import { qzyWeeklyItem } from '@/apis/qzyType'
import UploadFile from '@/components/UploadFile'

export default defineComponent({
  name: 'QzyWeeklyConfiguration',
  setup() {
    const loading = ref(false)
    const flag = ref(1)
    const num = ref(0)
    const dataList = ref({} as qzyWeeklyItem)
    //获取周报详情
    async function getweeklyDetail() {
      loading.value = true
      try {
        const data = await qzyApi.getReportDetai()
        if (data) {
          dataList.value = data
        }
      } finally {
        if (dataList.value.drawNum === 0) {
          flag.value = 1
          num.value = dataList.value.sendPoint
        }
        if (dataList.value.sendPoint === 0) {
          flag.value = 0
          num.value = dataList.value.drawNum
        }
        loading.value = false
      }
    }

    async function handleSave() {
      if (flag.value === 1) {
        dataList.value.drawNum = 0
        dataList.value.sendPoint = num.value
      } else {
        dataList.value.sendPoint = 0
        dataList.value.drawNum = num.value
      }
      try {
        await qzyApi.editReport(dataList.value).then(() => {
          getweeklyDetail()
          message.success('保存成功')
        })
      } finally {
      }
    }
    onMounted(() => {
      getweeklyDetail()
    })

    return {
      num,
      flag,
      dataList,
      loading,
      handleSave,
      getweeklyDetail
    }
  },
  render() {
    return (
      <div>
        <Spin spinning={this.loading}>
          <Form>
            <FormItem label="集赞规则:">
              <UploadFile v-model={[this.dataList.rule, 'urls']}>
                上传图片
              </UploadFile>
            </FormItem>
            <FormItem label="集赞规则设置:" style={{ display: 'flex' }}>
              {` 周报点赞数量≥`}
              <InputNumber
                v-model:value={this.dataList.likeNum}
                style={{ marginLeft: '10px', marginRight: '10px' }}
                min={0}
              ></InputNumber>
              个，
              {`赠送`}
              <Select
                v-model:value={this.flag}
                style={{ width: '100px', marginLeft: '10px' }}
              >
                <SelectOption value={1}>积分</SelectOption>
                <SelectOption value={0}>抽奖次数</SelectOption>
              </Select>
              <InputNumber
                v-model:value={this.num}
                style={{
                  paddingBottom: '1px',
                  marginLeft: '5px',
                  width: '60px'
                }}
                min={0}
              ></InputNumber>
            </FormItem>
            <FormItem label="周报分享卡片封面:" style={{ marginTop: '30px' }}>
              <UploadFile v-model={[this.dataList.shareImg, 'urls']}>
                上传图片
              </UploadFile>
              <span style={{ color: '#aaaaaa' }}>只允许上传一张</span>
            </FormItem>
            <FormItem style={{ marginTop: '30px', marginLeft: '20px' }}>
              <Button
                type="primary"
                style={{ width: '200px', height: '40px' }}
                onClick={this.handleSave}
              >
                保存
              </Button>
            </FormItem>
          </Form>
        </Spin>
      </div>
    )
  }
})
